<template>
   <header :class="type">
     <div class="div">
       <img v-show="left_title"
            :src="left_icon"
            :style="{
              width: left_icon_width,
              height: left_icon_height,
              margin: '0 5px 0 0'
            }"
            alt=""
            @click="clickLeft"
       >
       <span
         @click="clickLeft"
         >{{left_title}}</span>
     </div>
     <div class="div">
       <span>{{title}}</span>
     </div>
     <div class="div">
       <span @click="clickRight">{{right_title}}</span>
     </div>
   </header>
</template>

<script>
export default {
  name: 'Header',
  props: {
    type: {
      type: String,
      default: 'white',
      // 是否为必传
      required: false
    },
    left_icon_width: {
      type: String,
      default: '7px',
      // 是否为必传
      required: false
    },
    left_icon_height: {
      type: String,
      default: '13px',
      // 是否为必传
      required: false
    },
    left_icon: {
      type: String,
      default: require('../../assets/返回.png'),
      // 是否为必传
      required: false
    },
    // TextColor: {
    //   type: String,
    //   default: '#1da4f2',
    //   // 是否为必传
    //   required: false
    // },
    // backgroundColor: {
    //   type: String,
    //   default: '#fff',
    //   // 是否为必传
    //   required: false
    // },
    title: {
      type: String,
      default: '',
      // 是否为必传
      required: false
    },
    left_title: {
      type: String,
      default: '返回',
      // 是否为必传
      required: false
    },
    right_title: {
      type: String,
      default: '',
      // 是否为必传
      required: false
    }
  },
  methods: {
    clickLeft () {
      this.$emit('click-left')
    },
    clickRight () {
      this.$emit('click-right')
    }
  }
}
</script>

<style scoped lang="scss">
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 15px;
  position: sticky;
  top: 0;
  z-index: 9999;
  .div{
    display: flex;
    align-items: center;
    &:nth-child(2) {
      flex: 2;
      justify-content: center;
    }
    &:last-child {
      flex: 2;
      justify-content: flex-end;
    }
    &:first-child,
    &:last-child{
      flex: 1;
    }
  }
}
.blue{
  background: #1da4f2;
  color: #FFFFFF;
}
.white{
  background: #FFFFFF;
  color: #1da4f2;
  border-bottom: 1px solid #E5E5E5;
  .div:nth-child(2) {
    color: #333333;
  }
}
</style>
